import React,{ useEffect, useState } from "react";
import './manageState.css'
import ShowDataBlock from '../../../components/ShowDataBlock/ShowDataBlock'
import ShowLineEcharts from '../../../components/ShowEcharts/ShowEcharts'
import axios from "../../../http/index";


const Index = () => {
  const [DataBlockList,setDataBlockList] = useState([])
  const [LineChartsData,setLineChartsData] = useState([])

  const GetData = () => {
    axios({
      url: "/data/general",
      method: "GET",
      data: {
        currentPage: 1
      },
    })
    .then((res) => {
      setDataBlockList(res.data.dataBlockList)
      setLineChartsData(res.data.lineChartsData)
    })
    .catch((err) => {
      console.log(err);
    });
  }
  
  useEffect(() => {
    GetData()
  },[])


  return (
    <div>
      <p className="ManageState_Title">经营概况</p>
      <ShowDataBlock BlockArray={DataBlockList}></ShowDataBlock>
      <div className='LineChart'>
        {
          LineChartsData && LineChartsData.map((item,index) => {
            return (
              <div className="LineChartItem" key={index}>
                <ShowLineEcharts LineCharts={item}></ShowLineEcharts>
              </div>
            )
          })
        }
      </div>
    </div>
  )
};

export default Index;
